<template>
    <view class="index">
        <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="enable">
            <u-navbar
				title="排行榜"
				titleColor="#FFF"
                :border-bottom="false"
                :is-fixed="false"
                custom-class="nav-bg"
				:background="{background: 'transparent'}"
				back-icon-color="#FFF"
            > 
            </u-navbar>
        </u-sticky>
		<view class="desc">每周周一更新</view>
		<view class="main-box">
					<view class="invite-list">
						<view class="invite-item row" v-for="(item, index) in bambooRankList" :key="index" @tap="toDetails(item.id)">
							<view class="imgs-box">
								<image :src="item.image" class="invite-img" />
								<view class="rank-box">
									<image :src="`../../static/images/bamboo/rank${index+1}.png`" class="rank-img" v-if="index <= 2" />
									<view class="rank-text">
										<view class="txt1">TOP</view>
										<view class="txt2">{{index+1}}</view>
									</view>
								</view>
							</view>
							<view class="content flex1 column">
								<view class="name-remark-box">
									<view class="name">{{item.name}}</view>
									<view class="remark">{{item.remark || '暂无'}}</view>
								</view>
								<view class="num-box row">
									门市价
									<view class="price-box"><text class="unit">¥</text>{{item.market_price}}</view>
								</view>
								<!-- 玉竹兑换 -->
								<view class="exchange-box">
									<view>{{item.top_sku_bamboo_price}}玉竹</view>
									兑换
								</view>
							</view>
						</view>
						<loading-footer :status="bambooRankStatus" slotEmpty>
								<u-empty text="暂无商品~" slot="empty"></u-empty>
						</loading-footer>
					</view>
			</tabs>
		</view>
	

        <!-- 无网络提示 -->
        <u-no-network z-index="1200" @retry="handleRetry"></u-no-network>
    </view>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from 'vuex'
import { getBambooRank } from '@/api/store'
import { loadingType } from '@/utils/type'
import { loadingFun, menuJump, arraySlice, setTabbar, getRect, trottle } from '@/utils/tools'
import { toLogin } from '@/utils/login'
import Cache from '@/utils/cache'
import { getConfig, userShare } from '@/api/app'



const app = getApp()
export default {
    data() {
        return {
            scrollTop: 0,
            navSwiperH: 374,
            logo: '',
            navHeight: 0,
            currentSwiper: 0,
            page: 1,
            status: loadingType.LOADING,      
            navBg: 0,
            hotGoods: [],
            newGoods: [],
            activityArea: [],
            enable: true,
			bambooRankPage: 1,
			bambooRankStatus: loadingType.LOADING,
			bambooRankList: [], // 玉竹排行榜
        }
    },
	computed: {
	    ...mapGetters(['inviteCode', 'appConfig']),
		inviteType(){
			let typeObj = {
				0: 'direct', // 邀请
				1: 'indirect' // 下级
			}
			return typeObj[this.tabActive]
		}
	},
    async onLoad(options) {
		console.log('options---', options)
		
		this.getbambooRankFun()
		
    
        this.onPageScroll = trottle(this.onPageScroll, 500, this)
        setTabbar()
        this.navHeight = app.globalData.navHeight

        console.log(this.appConfig)
    },
    async onShow() {
        this.$nextTick(function () {
            getRect('.index').then((res) => {
                if (res.top == 0) {
                    this.navBg = 0
                }
            })
        })

        // #ifdef H5
        this.enable = true
        // #endif
    },
    onHide() {
        // #ifdef H5
        this.enable = false
        // #endif
    },
    onReachBottom() {
		this.bambooRankPage = 1
		this.bambooRankStatus = loadingType.LOADING
        this.getbambooRankFun()
    },
    onPullDownRefresh() {
    
    },
    onShareAppMessage() {
        console.log(this.inviteCode)
        const shareInfo = Cache.get('shareInfo')
        return {
            title: shareInfo.mnp_share_title,
            path: 'pages/index/index?invite_code=' + this.inviteCode,
            imageUrl: shareInfo.mnp_share_image
        }
    },
    onPageScroll(e) {
        const top = uni.upx2px(100)
        const { scrollTop } = e
        if (!this.enable) return
        let percent = scrollTop / top
        this.navBg = percent > 1 ? 1 : percent
        this.scrollTop = scrollTop
    },
    destroyed() {
      
    },
    methods: {
        ...mapMutations(['SETCONFIG']),
        ...mapActions(['getUser']),
        // 网络重试刷新网络请求（解决在ios中首次进入时需要授权蜂窝加载空白页面问题
        async handleRetry() {
            console.log('网络重试刷')
            try {
                const { code, data } = await getConfig()
                if (code == 1) {
                    this.SETCONFIG(data)
                    setTabbar()
                }
            } catch (e) {
                uni.showTabBar()
            }
            this.getShareInfo()
            this.getUser()
        },
		// 玉竹兑换排行榜
		async getbambooRankFun() {
		    let { bambooRankPage, bambooRankList, bambooRankStatus } = this
		    const data = await loadingFun(getBambooRank, bambooRankPage, bambooRankList, bambooRankStatus)
		    if (!data) return
		    this.bambooRankPage = data.page
		    this.bambooRankList = data.dataList
			console.log('this.bambooRankList', this.bambooRankList)
		    this.bambooRankStatus = data.status
		},
		toDetails(id){
			uni.navigateTo({
				url: `/pages/goods_details/goods_details?id=${id}`
			})
		},
        async getShareInfo() {
            const { code, data } = await userShare()
            if (code == 1) {
                Cache.set('shareInfo', data)
            }
        },
    },
}
</script>

<style lang="scss" scoped>
page{
	min-height: 100vh;
	background: #F5F5F5;
}
.desc{
	font-size: 24rpx;
	color: #FFFFFF;
	line-height: 34rpx;
	display: flex;
	justify-content: flex-end;
	margin: 240rpx 20rpx 10rpx 0;
}
.main-box{
	padding: 30rpx 20rpx;
	background: #FCFBFC;
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	// margin-top: 260rpx;
	.invite-list{
		.invite-item{
			position: relative;
			padding: 12rpx 16rpx;
			background: #FFF;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
		     align-items: stretch;
			.imgs-box{
				position: relative;
				width: 200rpx;
				height: 200rpx;
				margin-right: 28rpx;
				.invite-img{
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}
				.rank-box{
					position: absolute;
					width: 56rpx;
					height: 76rpx;
					left: 0;
					top: 0;
					z-index: 1;
				}
				.rank-img{
					position: absolute;
					left: 0;
					top: 0;
					width: 56rpx;
					height: 76rpx;
					z-index: 1;
				}
				.rank-text{
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					z-index: 2;
					font-weight: 500;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 28rpx;
					text-align: center;
					.text2{
						margin-top: 10rpx;
						font-weight: 700;
					}
				}
			}
			
			.content{
				justify-content: space-between;
				.name{
					font-weight: 600;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin-bottom: 10rpx;
				}
				.remark{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 34rpx;
				}
				.num-box{
					margin-top: 12rpx;
					font-size: 20rpx;
					color: #999999;
					line-height: 28rpx;
					.price-box{
						font-weight: 700;
						font-size: 48rpx;
						color: #FF7125;
						line-height: 32rpx;
						.unit{
							margin-left: 8rpx;
							font-size: 28rpx;
						}
					}
				}
				.exchange-box{
					position: absolute;
					right: 20rpx;
					bottom: 12rpx;
					width: 114rpx;
					height: 92rpx;
					text-align: center;
					background: url(#{$img_prefix}/images/xcxweb/index/exchange_bg.png) no-repeat;
					background-size: 100% 100%;
					color: #FFF;
					font-size: 24rpx;
					padding: 18rpx 0 0 0;
					line-height: 30rpx;
				}
			}
		}
	}
}

.nav-bg{
	
}

.index {
	background: url() no-repeat;
    background-size: 100% 1088rpx;
	min-height: 1088rpx;
}
</style>
